<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=data-transform-sort-bar
-->
<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body>
{% include 'menu.html' %}
<div id="container" style="height: 400px;width: 30%;margin-left: 5%;"></div>


<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>



<script type="text/javascript">


    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};

    {#首先，声明两个 javascript 的数组#}
    var source = [];


    {#使用循环，依次将数据库需要展示的数据添加到刚才声明的数组中#}
    {% for stu in objs %}
        var tmp = []
        tmp.push('{{ stu.icon }}',{{ stu.counts }})
        source.push(tmp)
    {% endfor %}

    console.log(source)

    var option;
    console.log('{{ res }}')
    option = {
        title: {
            text: 'ECharts 入门示例'
        },
        dataset: [
            {
                dimensions: ['name', 'age'],
                source: source
                {#    [#}
                {#    ['Hannah Krause', 41],#}
                {#    ['Zhao Qian', 20],#}
                {#    ['Zhao Qian2', 20],#}
                {#    ['Zhao Qian3', 20],#}
                {#    ['Zhao Qian4', 20],#}
                {#    ['Zhao Qian7', 20],#}
                {#    ['Zhao Qian5', 20],#}
                {#    ['Zhao Qian6', 20],#}
                {#]#}
            },
            {
                transform: {
                    type: 'sort',
                    config: {dimension: 'age', order: 'desc'}
                }
            }
        ],
        xAxis: {
            type: 'category',
            axisLabel: {interval: 0, rotate: 50}
        },
        yAxis: {},
        series: {
            type: 'bar',
            encode: {x: 'name', y: 'age'},
            datasetIndex: 1
        }
    };

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

</script>
</body>
</html>
